<template>
  <div class="search-commission">
    <template v-if="!isLogin">
      <div class="no-login-wrapper">
        <span class="jd-logo">京</span>
        <span>您未登录京东！</span>
      </div>
    </template>
    <template v-else>
      <div
        class="commission-content jtt-clearfix"
        @mouseenter="showDetailFlag = true"
        @mouseleave="showDetailFlag = false"
      >
        <div class="jtt-fl">
          <span class="jd-logo">京</span>
          <span>佣金</span>
          <span class="commission">￥{{ commissionInfo.wlCommission }}</span>
        </div>
        <div class="jtt-fr">
          <span>比例</span>
          <span class="commission-percent"
            >{{ commissionInfo.wlCommissionRatio }}%</span
          >
        </div>
        <div class="commission-detail" v-if="showDetailFlag">
          <!-- <h3>月推广量:<span class="value-red">{{commissionInfo}}</span> 件</h3> -->
          <div>
            月支出佣金:<span class="value-red">{{
              commissionInfo.inOrderComm30Days
            }}</span>
            元
          </div>
          <div>
            好评率:<span class="value-red">{{
              commissionInfo.goodCommentsShare
            }}</span>
            %
          </div>
          <div>
            PLUS比例：<span class="value-purple">{{
              commissionInfo.wlCommissionRatio
            }}</span>
            %
          </div>
          <div>
            PLUS佣金：<span class="value-purple">{{
              commissionInfo.wlCommission
            }}</span>
            元
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    isLogin: {
      type: Boolean,
      default: () => {
        return false;
      },
      required: true,
    },
    commissionInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      showDetailFlag: false,
    };
  },
};
</script>

<style lang="less" scoped>
.search-commission {
  .no-login-wrapper {
    font-size: 12px;
    color: #999999;
    margin-bottom: 8px;
    .jd-logo {
      margin-right: 5px;
      display: inline-block;
      width: 17px;
      height: 17px;
      font-size: 12px;
      text-align: center;
      line-height: 17px;
      color: #fff;
      background: #f52d36;
      border-radius: 3px;
    }
  }
  .commission-content {
    position: relative;
    font-size: 12px;
    color: #999999;
    margin-bottom: 8px;
    .jd-logo {
      margin-right: 5px;
      display: inline-block;
      width: 17px;
      height: 17px;
      font-size: 12px;
      text-align: center;
      line-height: 17px;
      color: #fff;
      background: #f52d36;
      border-radius: 3px;
    }
    .commission,
    .commission-percent {
      margin-left: 5px;
      font-weight: bold;
      color: rgba(245, 45, 54, 1);
    }
    .commission-detail {
      box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.07);
      border-radius: 4px;
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(-100%);
      width: 100%;
      box-sizing: border-box;
      padding: 12px;
      background: #fff;
      font-size: 12px;
      color: rgba(102, 102, 102, 1);
      line-height: 22px;
      font-weight: 400;
      .value-red {
        font-weight: bold;
        color: rgba(245, 45, 54, 1);
      }
      .value-purple {
        font-weight: bold;
        color: rgba(104, 98, 255, 1);
      }
    }
  }
}
</style>